import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    TouchableHighlight,
    Animated,
    Easing,
    ScrollView,
    KeyboardAvoidingView,
    Platform,
    Dimensions,
    TouchableOpacity,

} from 'react-native';
import Label from '../label/index';
import PropTypes from 'prop-types';
import Color from '../../config/theme/standard/color';
import Fonts from '../../config/theme/standard/fonts';
import BlockSelect from '../blockSelect/index';
import Picker from '../picker'

const aHeight = 181;


export default class CascadeDatePicker extends Component {

    constructor(props) {
        super(props);
        this.state = {
            offset: new Animated.Value(0),
            hide: this.props.hide,
            prevPropsHide: this.props.hide,
            innerHeight: 181,
            begEnd: '',
            startYear: 0,
            endYear: 0,
            startMonth: 0,
            endMonth: 0,
            startDay: 0,
            endDay: 0,

            yearArr: this.pushTimeList(this.props.minTime.split('-')[0], this.props.maxTime.split('-')[0]),

            monthArr: this.pushTimeList(1, 12),
            endMonthArr: this.pushTimeList(1, 12),

            dayArr: this.props.openDayArr ? this.pushTimeList(1, this.getdays(this.props.startTime)) : [],
            endDayArr: this.props.openDayArr ? this.pushTimeList(1, this.getdays(this.props.endTime)) : [],

            selextIndex: -1,
            startbool: false,
            endbool: false,
            isWideScreen: false // 鸿蒙适配是否宽屏
        };
        this.contentHeight = 0;
    }

    componentWillUnmount() {
        // 适配鸿蒙折叠屏动态更新组件
        if (this.addEventListenerScreenWidth) {
            this.addEventListenerScreenWidth = null
        }
    }
    setIsWideScreen = () => {
        const screenWidth = Dimensions.get('window').width;
        if (screenWidth) {
            this.setState({
                isWideScreen: screenWidth > 500 && screenWidth < 800
            })
        }
    }

    //显示动画
    _in() {
        Animated.parallel([
            Animated.timing(
                this.state.offset,
                {
                    easing: Easing.linear,
                    duration: 500,
                    toValue: 1,
                }
            )
        ]).start();
    }
    //隐藏动画
    _out() {
        Animated.parallel([
            Animated.timing(
                this.state.offset,
                {
                    easing: Easing.linear,
                    duration: 500,
                    toValue: 0,
                }
            )
        ]).start((finished) => this.setState({ hide: true }));
    }
    _return() {


        if (this.props.showMask && this.props.clickMask) {

            this.props.destroy();
            this.setState({ hide: true });
        }
        if (this.props.showMask && this.props.maskClickEvent) {
            this.props.maskClickEvent()
        }

    }

    setDate = (startTime, endTime) => {
        let { dayArr, endDayArr } = this.state
        const { minTime, maxTime } = this.props
        if (startTime && endTime) {
            this.setState({
                endbool: true,
                startbool: true
            })

        }

        if (minTime.slice(0, 7) == startTime.slice(0, 7)) {

            dayArr = this.pushTimeList(minTime.split('-')[2], this.getdays(startTime))
            endDayArr = this.pushTimeList(1, this.getdays(endTime))

        } else if (dayArr.length == 0 || endDayArr.length == 0) {

            dayArr = this.pushTimeList(1, this.getdays(startTime))
            endDayArr = this.pushTimeList(1, this.getdays(endTime))
        }


        if (maxTime.slice(0, 4) === startTime.slice(0, 4)) {

            this.setState({
                monthArr: this.pushTimeList(1, maxTime.split('-')[1]),
                endMonthArr: this.pushTimeList(1, maxTime.split('-')[1]),
            })
            let starttimer = startTime.split('-')

            this.state.yearArr.forEach((it, index) => {
                if (it.name == starttimer[0]) {

                    this.setState({
                        startYear: index
                    })
                }

            })


            this.state.monthArr.forEach((it, index) => {
                if (Number(it.name) == starttimer[1]) {

                    this.setState({
                        startMonth: index
                    })
                }

            })

            dayArr.forEach((it, index) => {

                if (it.name == starttimer[2]) {

                    this.setState({
                        startDay: index
                    })

                }
            })



            if (endTime) {
                let endtimer = endTime.split('-')
                this.state.yearArr.forEach((it, index) => {
                    if (it.name == endtimer[0]) {
                        this.setState({
                            endYear: index
                        })
                    }
                })

                this.state.endMonthArr.forEach((it, index) => {
                    if (it.name == endtimer[1]) {
                        this.setState({
                            endMonth: index
                        })
                    }

                })
                endDayArr.forEach((it, index) => {
                    if (it.name == endtimer[2]) {
                        this.setState({
                            endDay: index
                        })
                    }
                })

            }

        } else {
            this.setState({
                monthArr: this.pushTimeList(1, 12),
                endMonthArr: this.pushTimeList(1, 12),
            }, () => {

                let starttimer = startTime.split('-')

                this.state.yearArr.forEach((it, index) => {
                    if (it.name == starttimer[0]) {

                        this.setState({
                            startYear: index
                        })
                    }

                })


                this.state.monthArr.forEach((it, index) => {

                    if (Number(it.name) == starttimer[1]) {

                        this.setState({
                            startMonth: index
                        })
                    }

                })

                dayArr.forEach((it, index) => {

                    if (it.name == starttimer[2]) {

                        this.setState({
                            startDay: index
                        })

                    }
                })



                if (endTime) {
                    let endtimer = endTime.split('-')
                    this.state.yearArr.forEach((it, index) => {
                        if (it.name == endtimer[0]) {
                            this.setState({
                                endYear: index
                            })
                        }
                    })

                    this.state.endMonthArr.forEach((it, index) => {
                        if (it.name == endtimer[1]) {
                            this.setState({
                                endMonth: index
                            })
                        }

                    })
                    endDayArr.forEach((it, index) => {

                        if (it.name == endtimer[2]) {
                            this.setState({
                                endDay: index
                            })
                        }
                    })

                }

            })



        }









    }
    _close() {
        this.props.destroy();
        this.setState({ hide: true });
        if (this.props.iconFunc) {
            this.props.iconFunc();
        }
    }

    _iconFunc() {
        if (this.props.iconFunc) {
            this.props.iconFunc();
        } else {
            this._return();
        }
    }

    _operateFunc() {
        let { startYear, endYear, startMonth, endMonth, monthArr, endMonthArr, yearArr, startDay, endDay, endbool, startbool } = this.state;
        let start, end;
        if (this.props.openDayArr) {

            start = `${yearArr[startYear].name}-${monthArr[startMonth].name}-${this.dayArr[startDay] && this.dayArr[startDay].name}`
            end = `${yearArr[endYear].name}-${endMonthArr[endMonth].name}-${this.endDayArr[endDay] && this.endDayArr[endDay].name}`
        } else {
            start = `${yearArr[startYear].name}-${monthArr[startMonth].name}`
            end = `${yearArr[endYear].name}-${endMonthArr[endMonth].name}`
        }

        if (startbool && endbool) {

            this.props.operateFunc([start, end]);
        } else {
            if (this.props.defeatedHintFunc) {
                this.props.defeatedHintFunc()
            } else {
                alert(this.props.defeatedHint)
            }

        }


    }
    getdays(val) {
        let a = new Date(val)
        return new Date(a.getFullYear(), a.getMonth() + 1, 0).getDate()
    }


    upData = () => {
        const { minTime, maxTime, startTime, endTime, openDayArr } = this.props
        let { dayArr, monthArr } = this.state
        if (startTime) {
            this.setState({
                startbool: true
            })
        }
        if (endTime) {
            this.setState({ endbool: true })
        }


        if (minTime.slice(0, 7) == startTime.slice(0, 7) && openDayArr) {

            dayArr = this.pushTimeList(minTime.split('-')[2], this.getdays(this.props.startTime))

        }


        if (minTime.slice(0, 4) == maxTime.slice(0, 4)) {

            this.setState({
                monthArr: this.pushTimeList(minTime.split('-')[1], maxTime.split('-')[1]),
                endMonthArr: this.pushTimeList(minTime.split('-')[1], maxTime.split('-')[1]),
            })
        } else if (minTime.split('-')[0] == startTime.split('-')[0]) {
            if (maxTime.split('-')[1] == endTime.split('-')[1]) {
                this.setState({
                    monthArr: this.pushTimeList(minTime.split('-')[1], 12),
                    endMonthArr: this.pushTimeList(1, maxTime.split('-')[1])
                })
            } else {
                this.setState({
                    monthArr: this.pushTimeList(minTime.split('-')[1], 12),
                    endMonthArr: this.pushTimeList(minTime.split('-')[1], 12)
                })
            }


        } else if ((maxTime.split('-')[0] == startTime.split('-')[0])) {

            this.setState({
                monthArr: this.pushTimeList(1, maxTime.split('-')[1]),
                endMonthArr: this.pushTimeList(1, maxTime.split('-')[1]),
            })
        }

        this.setState({

            yearArr: this.pushTimeList(minTime.split('-')[0], maxTime.split('-')[0]),

        }, () => {
            if (startTime) {

                let starttimer = startTime.split('-')
                this.state.yearArr.forEach((it, index) => {
                    if (it.name == starttimer[0]) {
                        this.setState({
                            startYear: index
                        })
                    }

                })

                this.state.monthArr.forEach((it, index) => {
                    if (it.name == starttimer[1]) {
                        this.setState({
                            startMonth: index
                        })
                    }

                })


                if (openDayArr) {
                    dayArr.forEach((it, index) => {
                        if (it.name == starttimer[2]) {

                            this.setState({
                                startDay: index
                            })

                        }
                    })
                }

            }
            if (endTime) {
                let endtimer = endTime.split('-')
                this.state.yearArr.forEach((it, index) => {
                    if (it.name == endtimer[0]) {
                        this.setState({
                            endYear: index
                        })
                    }
                })

                this.state.endMonthArr.forEach((it, index) => {
                    if (it.name == endtimer[1]) {
                        this.setState({
                            endMonth: index
                        })
                    }

                })
                if (openDayArr) {
                    this.state.endDayArr.forEach((it, index) => {
                        if (it.name == endtimer[2]) {
                            this.setState({
                                endDay: index
                            })
                        }
                    })
                }



            }
        })
    }

    componentDidMount() {
        this.upData()
        // 适配鸿蒙折叠屏动态更新组件
        this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
    }



    BlockPress = (begEnd) => {
        let { opendefaultTime } = this.props
        this.blockSelset._onPress('-1')

        this.setState({
            innerHeight: 370,
            begEnd: begEnd,
        })

        if (begEnd == 'start') {
            opendefaultTime && this.setState({
                startbool: true
            })
            let { minTime, maxTime, openDayArr }
                = this.props;
            let { offset, hide, innerHeight, startYear, endYear, startMonth, endMonth, monthArr, endMonthArr, yearArr, dayArr, endDayArr, startDay, endDay } = this.state;
            // `${yearArr[startYear].name}-${monthArr[startMonth].name}-${dayArr[startDay] && dayArr[startDay].name} ` 
            if (yearArr[startYear].name == maxTime.slice(0, 4)) {
                this.setState({
                    monthArr: this.pushTimeList(1, maxTime.split('-')[1]),

                }, () => {
                    let starttimer;
                    if (openDayArr) {
                        starttimer = `${yearArr[startYear].name}-${monthArr[startMonth].name}-${dayArr[startDay] && dayArr[startDay].name} `.split('-')
                    } else {
                        starttimer = `${yearArr[startYear].name}-${monthArr[startMonth].name}`.split('-')
                    }


                    this.state.yearArr.forEach((it, index) => {
                        if (it.name == starttimer[0]) {

                            this.setState({
                                startYear: index
                            })
                        }

                    })


                    this.state.monthArr.forEach((it, index) => {
                        if (Number(it.name) == starttimer[1]) {

                            this.setState({
                                startMonth: index
                            })
                        }

                    })
                    if (openDayArr) {
                        dayArr.forEach((it, index) => {

                            if (it.name == starttimer[2]) {

                                this.setState({
                                    startDay: index
                                })

                            }
                        })
                    }

                })



            } else if (yearArr[startYear].name == minTime.slice(0, 4)) {
                this.setState({
                    monthArr: this.pushTimeList(minTime.split('-')[1], 12),

                }, () => {
                    let starttimer;
                    if (openDayArr) {
                        starttimer = `${yearArr[startYear].name}-${monthArr[startMonth].name}-${dayArr[startDay] && dayArr[startDay].name} `.split('-')
                    } else {
                        starttimer = `${yearArr[startYear].name}-${monthArr[startMonth].name}`.split('-')
                    }


                    this.state.yearArr.forEach((it, index) => {
                        if (it.name == starttimer[0]) {

                            this.setState({
                                startYear: index
                            })
                        }

                    })


                    this.state.monthArr.forEach((it, index) => {
                        if (Number(it.name) == starttimer[1]) {

                            this.setState({
                                startMonth: index
                            })
                        }

                    })
                    if (openDayArr) {
                        dayArr.forEach((it, index) => {

                            if (it.name == starttimer[2]) {

                                this.setState({
                                    startDay: index
                                })

                            }
                        })
                    }

                })

            }

        }



        if (begEnd == 'end') {
            opendefaultTime && this.setState({
                endbool: true
            })
            let { minTime, maxTime, openDayArr }
                = this.props;
            let { offset, hide, innerHeight, startYear, endYear, startMonth, endMonth, monthArr, endMonthArr, yearArr, dayArr, endDayArr, startDay, endDay } = this.state;

            if (yearArr[endYear].name == maxTime.slice(0, 4)) {

                this.setState({
                    endMonthArr: this.pushTimeList(1, maxTime.split('-')[1]),

                }, () => {

                    let endtimer;
                    if (openDayArr) {
                        endtimer = `${yearArr[endYear].name}-${endMonthArr[endMonth].name}-${endDayArr[endDay] && endDayArr[endDay].name}`.split('-')

                    } else {
                        endtimer = `${yearArr[endYear].name}-${endMonthArr[endMonth].name}`.split('-')

                    }

                    this.state.yearArr.forEach((it, index) => {
                        if (it.name == endtimer[0]) {
                            this.setState({
                                endYear: index
                            })
                        }
                    })

                    this.state.endMonthArr.forEach((it, index) => {
                        if (it.name == endtimer[1]) {
                            this.setState({
                                endMonth: index
                            })
                        }

                    })
                    if (openDayArr) {
                        endDayArr.forEach((it, index) => {

                            if (it.name == endtimer[2]) {
                                this.setState({
                                    endDay: index
                                })
                            }
                        })
                    }

                })



            } else if (yearArr[endYear].name == minTime.slice(0, 4)) {
                this.setState({
                    endMonthArr: this.pushTimeList(minTime.split('-')[1], 12),

                }, () => {

                    let endtimer;
                    if (openDayArr) {
                        endtimer = `${yearArr[endYear].name}-${endMonthArr[endMonth].name}-${endDayArr[endDay] && endDayArr[endDay].name}`.split('-')

                    } else {
                        endtimer = `${yearArr[endYear].name}-${endMonthArr[endMonth].name}`.split('-')
                    }

                    this.state.yearArr.forEach((it, index) => {
                        if (it.name == endtimer[0]) {
                            this.setState({
                                endYear: index
                            })
                        }
                    })

                    this.state.endMonthArr.forEach((it, index) => {
                        if (it.name == endtimer[1]) {
                            this.setState({
                                endMonth: index
                            })
                        }

                    })
                    if (openDayArr) {
                        endDayArr.forEach((it, index) => {

                            if (it.name == endtimer[2]) {
                                this.setState({
                                    endDay: index
                                })
                            }
                        })
                    }

                })

            }

        }





    }
    onBlockSelect = (index) => {
        this.setState({
            innerHeight: 180,
            begEnd: ''
        })
        let { offset, hide, innerHeight, begEnd, startYear, endYear, startMonth, endMonth, monthArr, endMonthArr, yearArr, dayArr, endDayArr, startDay, endDay } = this.state;

        if (this.props.timeSelectFun) {
            if (this.props.openDayArr) {
                this.props.timeSelectFun(index, this.setDate, `${yearArr[endYear].name}-${endMonthArr[endMonth].name}-${endDayArr[endDay] && endDayArr[endDay].name}`)
            } else {
                this.props.timeSelectFun(index, this.setDate, `${yearArr[endYear].name}-${endMonthArr[endMonth].name}`)
            }
        }
    }

    pushTimeList(min, max) {
        let arrList = []
        for (let i = min; i <= max; i++) {
            if (String(i).length == 1) {
                i = '0' + String(i)
            }
            arrList.push({ name: i })
        }
        return arrList
    }

    onchangYear = (year, index,) => {
        const { begEnd, startYear, monthArr, yearArr, startMonth, endYear, endMonthArr, endMonth } = this.state
        const { minTime, maxTime } = this.props
        if (begEnd === 'start') {
            this.setState({
                startYear: index,
                startbool: true
            })
            if (index == 0) {

                this.setState({
                    monthArr: this.pushTimeList(minTime.split('-')[1], 12),
                    startMonth: 0,
                    startDay: 0
                })
            } else if (index == yearArr.length - 1) {
                this.setState({
                    monthArr: this.pushTimeList(1, maxTime.split('-')[1]),
                    startMonth: 0,
                    startDay: 0
                })
            } else {
                this.setState({
                    monthArr: this.pushTimeList(1, 12),

                })
            }

        }

        if (begEnd === 'end') {

            this.setState({ endYear: index, endbool: true })
            if (index == 0) {

                this.setState({
                    endMonthArr: this.pushTimeList(minTime.split('-')[1], 12),
                    endMonth: 0,
                    endDay: 0
                })
            } else if (index == yearArr.length - 1) {
                this.setState({
                    endMonthArr: this.pushTimeList(1, maxTime.split('-')[1]),
                    endMonth: 0,
                    endDay: 0
                })
            } else {
                this.setState({
                    endMonthArr: this.pushTimeList(1, 12),

                })
            }


        }

    }

    onchangMonth = (month, index) => {
        const { begEnd } = this.state
        if (begEnd === 'start') {
            this.setState({ startMonth: index, startDay: 0, startbool: true, })
        } else if (begEnd === 'end') {
            this.setState({ endMonth: index, endDay: 0, endbool: true })
        }
    }

    onchangDay = (day, index) => {
        const { begEnd } = this.state
        if (begEnd === 'start') {
            this.setState({ startDay: index, startbool: true })
        } else if (begEnd === 'end') {
            this.setState({ endDay: index, endbool: true })
        }
    }





    render() {
        let { showMask, title, titleStyle, icon, iconStyles,
            operateText, operateTextStyles, minTime, maxTime, timeSelect, openTipTitle, openDayArr, dateTipTitle }
            = this.props;
        let { offset, hide, innerHeight, begEnd, startYear, endYear, startMonth, endMonth, monthArr, endMonthArr, yearArr, dayArr, endDayArr, startDay, endDay, startbool, endbool } = this.state;
        const width = Dimensions.get('window').width;
        const height = Dimensions.get('window').height;
        let containerStyle = [styles.container, Platform.OS == 'harmony' && { zIndex: 1 }];
        if (!showMask) {
            containerStyle.push({ backgroundColor: 'transparent' })
        }



        //左侧图标
        let leftIcon;
        if (icon) {
            leftIcon = (
                <TouchableHighlight style={styles.floatReturn} underlayColor='transparent' onPress={() => this._iconFunc()}>
                    <Image style={[styles.icon, iconStyles]} source={icon} />
                </TouchableHighlight>
            );
        } else {
            leftIcon = (
                <TouchableHighlight style={styles.floatReturn} underlayColor='transparent' onPress={() => this._close()}>
                    <Label text={this.props.cancelText} labelStyle={{ color: Color.cascadeDatePicker.leftContent, fontSize: Fonts.cascadeDatePicker.leftFontSize }} />
                </TouchableHighlight>
            );
        }
        if (openDayArr) {
            dayArr = this.pushTimeList(1, this.getdays(`${yearArr[startYear].name}-${monthArr[startMonth].name}`))
            endDayArr = this.pushTimeList(1, this.getdays(`${yearArr[endYear].name}-${endMonthArr[endMonth].name}`))


            if (minTime.slice(0, 7) == `${yearArr[startYear].name}-${monthArr[startMonth].name}`) {

                dayArr = this.pushTimeList(minTime.slice(8), this.getdays(`${yearArr[startYear].name}-${monthArr[startMonth].name}`))
            }

            if (maxTime.slice(0, 7) == `${yearArr[startYear].name}-${monthArr[startMonth].name}`) {
                dayArr = this.pushTimeList(1, maxTime.slice(8))
            }
            this.dayArr = dayArr


            if (minTime.slice(0, 7) == `${yearArr[endYear].name}-${endMonthArr[endMonth].name}`) {

                endDayArr = this.pushTimeList(minTime.slice(8), this.getdays(`${yearArr[endYear].name}-${endMonthArr[endMonth].name}`))
            }

            if (maxTime.slice(0, 7) == `${yearArr[endYear].name}-${endMonthArr[endMonth].name}`) {
                endDayArr = this.pushTimeList(1, maxTime.slice(8))
            }
            this.endDayArr = endDayArr
        }







        if (hide) {
            return (<View />)
        } else {
            // 处理picker显示提示文本
            let yearTipArr, monthTipArr, endMonthTipArr, dayTipArr, endDayTipArr;
            if (openTipTitle) {

                yearTipArr = yearArr.map(item => ({
                    name: item.name + dateTipTitle[0]
                }))

                monthTipArr = monthArr.map(item => ({ name: item.name + dateTipTitle[1] }))

                endMonthTipArr = endMonthArr.map(item => ({ name: item.name + dateTipTitle[1] }))

                if (openDayArr) {
                    dayTipArr = dayArr.map(item => ({ name: item.name + dateTipTitle[2] }))

                    endDayTipArr = endDayArr.map(item => ({ name: item.name + dateTipTitle[2] }))
                }
            } else {
                yearTipArr = yearArr

                monthTipArr = monthArr

                endMonthTipArr = endMonthArr

                dayTipArr = dayArr

                endDayTipArr = endDayArr
            }

            // 定义开始标题
            let startTitle;
            if (startbool) {
                startTitle = `${yearArr[startYear].name}-${monthArr[startMonth].name}` + (openDayArr && dayArr[startDay] ? '-' + dayArr[startDay].name : '')
            } else {
                startTitle = "开始时间"
            }

            // 定义结束标题
            let endTitle;
            if (endbool) {
                endTitle = ` ${yearArr[endYear].name}-${endMonthArr[endMonth].name}` + (openDayArr && endDayArr[endDay] ? '-' + endDayArr[endDay].name : '')
            } else {
                endTitle = "结束时间"
            }

            return (
                <View style={containerStyle}>
                    {<TouchableOpacity
                        underlayColor={showMask ? 'rgba(0,0,0,.4)' : 'transparent'}
                        onPress={() => this._return()}
                    >
                        <View style={{ height: height, width: width, backgroundColor: 'transparent' }}></View>
                    </TouchableOpacity>}
                    <View style={[styles.float, { width: width, height: innerHeight }, Platform.OS == 'harmony' && { zIndex: 1 }]}>
                        <View style={[styles.floatHead, { width: width }]}>
                            <View style={{ width: 80 }}>{leftIcon}</View>
                            <Label text={title} labelStyle={[styles.title, titleStyle]} />
                            <TouchableHighlight underlayColor='transparent' onPress={() => this._operateFunc()}>
                                <View style={{ width: 80 }}><Label text={operateText} labelStyle={[styles.operateText, operateTextStyles]} /></View>
                            </TouchableHighlight>
                        </View>
                        <View>
                            <View style={styles.blockSelect} >
                                <BlockSelect
                                    ref={e => this.blockSelset = e}
                                    data={timeSelect}
                                    defaultIndex={this.state.selextIndex}
                                    type={'radio'}
                                    style={'primary'}
                                    size={'middle'}
                                    isRadius={true}
                                    onPress={(index) => { this.onBlockSelect(index) }}
                                />
                            </View>

                        </View>
                        <View>
                            <View style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', paddingLeft: 21, paddingRight: 21 }}>
                                <Block
                                    title={startTitle}
                                    color={begEnd === 'start' ? Color.cascadeDatePicker.startText : Color.cascadeDatePicker.endText}
                                    begEnd={'start'}
                                    borederStyle={Color.cascadeDatePicker.borderColor}
                                    onPress={(begEnd) => { this.BlockPress(begEnd) }}
                                />
                                <View>
                                    <View style={{ margin: 4, width: 17, height: 1, backgroundColor: Color.cascadeDatePicker.intervalBorder }}></View>
                                </View>

                                <Block
                                    title={endTitle}
                                    color={begEnd === 'end' ? Color.cascadeDatePicker.startText : Color.cascadeDatePicker.endText}
                                    begEnd={'end'}
                                    borederStyle={Color.cascadeDatePicker.borderColor}
                                    onPress={(begEnd) => { this.BlockPress(begEnd) }}
                                />
                            </View>
                        </View>
                        <View style={{ justifyContent: 'space-evenly', flexDirection: 'row', flex: 1 }} >
                            <View style={{ flex: 1 }}>
                                <Picker
                                    selectTo={begEnd === 'start' ? startYear : begEnd === 'end' ? endYear : 0}
                                    data={yearTipArr}
                                    ref='_Picker0'
                                    name='name'
                                    fontSize={13}
                                    onRowChange={(index) => { this.onchangYear(yearArr[index], index, yearArr) }}
                                />
                            </View>

                            <View style={{ flex: 1 }}>
                                <Picker
                                    selectTo={begEnd === 'start' ? startMonth : begEnd === 'end' ? endMonth : 0}
                                    data={begEnd === 'start' ? monthTipArr : endMonthTipArr}
                                    ref='_Picker1'
                                    name='name'
                                    fontSize={13}
                                    onRowChange={index => { this.onchangMonth(endMonthArr[index], index) }}
                                />
                            </View>


                            {
                                openDayArr && (<View style={{ flex: 1 }}>
                                    <Picker
                                        selectTo={begEnd === 'start' ? startDay : begEnd === 'end' ? endDay : 0}
                                        data={begEnd === 'start' ? dayTipArr : endDayTipArr}
                                        ref='_Picker2'
                                        name='name'
                                        fontSize={13}
                                        onRowChange={index => {
                                            this.onchangDay(endDayArr[index], index)
                                        }}
                                    />
                                </View>)
                            }


                        </View>
                    </View>
                </View>
            );

        }
    }
    //显示浮层方法
    show() {
        if (this.state.hide) {
            this.setState({ hide: false }, this._in());
        }
    }
    //隐藏浮层方法
    hide() {
        this._return();
    }
}

CascadeDatePicker.propTypes = {
    //是否显示遮罩
    showMask: PropTypes.bool,
    //点击遮罩收起浮层
    clickMask: PropTypes.bool,
    //浮层标题
    title: PropTypes.string,
    //浮层标题样式
    titleStyle: PropTypes.object,
    //左侧icon
    icon: PropTypes.any,
    //左侧icon样式
    iconStyles: PropTypes.object,
    //左侧icon操作
    iconFunc: PropTypes.func,
    //右侧文本
    operateText: PropTypes.string,
    //右侧文本样式
    operateTextStyles: PropTypes.object,
    //右侧文本操作
    operateFunc: PropTypes.func,
    hide: PropTypes.bool,
    destroy: PropTypes.func,
    minTime: PropTypes.string,
    maxTime: PropTypes.string,
    defeatedHint: PropTypes.string,
    timeSelect: PropTypes.array,
    timeSelectFun: PropTypes.func,
    defeatedHintFunc: PropTypes.func,
    // picker 提示文本
    dateTipTitle: PropTypes.array,
    // 是否显示提示文本
    openTipTitle: PropTypes.bool,
    // 是否显示日期
    openDayArr: PropTypes.bool,
    // 打开显示默认时间
    opendefaultTime: PropTypes.bool

}

CascadeDatePicker.defaultProps = {

    showMask: true,
    clickMask: true,
    title: "筛选",
    operateText: "完成",
    cancelText: '取消',
    destroy: () => { },
    hide: true,
    defeatedHint: '请选择开始或者结束时间',
    timeSelect: [
        { label: '近1月', value: '1', checked: false },
        { label: '近3月', value: '2', checked: false },
        { label: '近半年', value: '3', checked: false },
        { label: '近1年', value: '4', checked: false },
    ],
    dateTipTitle: ["年", "月", "号"],
    openTipTitle: false,
    openDayArr: true,
    opendefaultTime: false,
}

const styles = StyleSheet.create({
    container: {
        position: "absolute",
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    contentContainerStyle: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    maskClickArea: {
        position: "absolute",
        backgroundColor: 'transparent',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    float: {
        height: aHeight,
        backgroundColor: Color.white,
        position: "absolute",
        bottom: 0,
        right: 0,
        left: 0,
        alignItems: "center",
    },
    floatHead: {
        height: 44,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 9,
        paddingBottom: 9,
        paddingRight: 15,
        paddingLeft: 15,
        backgroundColor: Color.cascadeDatePicker.headBackground
    },
    icon: {
        width: 20,
        height: 20,
        resizeMode: 'contain'
    },
    title: {
        fontSize: Fonts.cascadeDatePicker.titleFontSize,
        color: Color.cascadeDatePicker.title,
        fontWeight: '400',
    },
    operateText: {
        textAlign: 'right',
        fontSize: Fonts.cascadeDatePicker.operateFontSize,
        color: Color.cascadeDatePicker.operateText
    },
    floatReturn: {
        marginLeft: 0
    },
    blockSelect: {
        height: 38,
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 16,
        marginBottom: 12
    }

});


class Block extends React.Component {
    render() {
        let width = (Dimensions.get('window').width - 21 - 21 - 25) / 2
        const { title, color, onPress, begEnd, borederStyle } = this.props
        let blockStyle = { justifyContent: 'center', alignItems: 'center', width: width, height: 36, backgroundColor: Color.cascadeDatePicker.blockBackground, borderRadius: 3 };


        if (borederStyle) {
            blockStyle = { ...blockStyle, borderWidth: 1, borderStyle: 'solid', borderColor: borederStyle }
        }


        return (
                <View style={blockStyle}>
                    <Label text={title} type='secTitle' fontFamily={Platform.OS === 'ios' ? '' : 'Roboto'} onPress={() => { onPress(begEnd) }} labelStyle={{ color: color }} />
                </View>
        )
    }
}